<template>
	<view>
		<u-form labelWidth="5em" :model="form" :rules="rules" ref="form">
			<u-form-item borderBottom label="姓名" prop="name">
				<u-input border="none" placeholder="请输入姓名" v-model="form.name" />
			</u-form-item>
			<u-form-item borderBottom label="手机号" prop="tel">
				<u-input border="none" placeholder="请输入联系方式" v-model="form.tel" />
			</u-form-item>
			<u-form-item borderBottom label="证件号" prop="card">
				<u-input border="none" placeholder="请输入身份证号" v-model="form.card" />
			</u-form-item>
			<u-form-item prop="type">
				<u-radio-group v-model="form.type">
					<u-radio label="医保" name="1"></u-radio>
					<u-radio label="商保" name="2"></u-radio>
					<u-radio label="合作医疗" name="3"></u-radio>
					<u-radio label="自费" name="4"></u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item borderBottom label="单位" prop="unit">
				<u-input border="none" placeholder="请输入单位地址" v-model="form.unit" />
			</u-form-item>
			<u-form-item borderBottom label="职业" prop="vocation">
				<u-input border="none" placeholder="请输入职业" v-model="form.vocation" />
			</u-form-item>
			<button @click="submit" class="submit">确认</button>
		</u-form>

		<view class="reserve" @click="targetAdd">
			<view>
				<image src="https://new.kuxia.top/uploads/image/20221019/80d3f0b119a146b7065ccb81dace68a9.png" />
				<text>预约</text>
			</view>
		</view>

		<u-toast ref="uToast"></u-toast>

	</view>
</template>

<script>
import {
	userExitInfo,
	getUserInfo
} from '../../request/index.js'
export default {
	data() {
		return {
			form: {
				uid: uni.getStorageSync('userid'),
				name: '',
				tel: '',
				card: '',
				type: '1',
				unit: '',
				vocation: '',
				NickName: uni.getStorageSync('userInfo').nickName,
				HeadUrl: uni.getStorageSync('userInfo').avatarUrl,
				sex: uni.getStorageSync('userInfo').gender
			},
			rules: {
				name: [{
					required: true,
					message: '请输入姓名',
					trigger: ['blur', 'change']
				}],
				tel: [{
					required: true,
					message: '请输入联系方式',
					trigger: ['blur', 'change'],
				}],
				card: [{
					required: true,
					message: '请输入身份证号',
					trigger: ['blur', 'change']
				}],
				type: [{
					required: true,
					message: '请选择保险类型',
					trigger: ['blur', 'change']
				}],
				unit: [{
					required: true,
					message: '请输入单位地址',
					trigger: ['blur', 'change']
				}],
				vocation: [{
					required: true,
					message: '请输入职业',
					trigger: ['blur', 'change']
				}],
			}
		}
	},
	onLoad() {
		getUserInfo({
			uid: this.form.uid
		}).then(res => {
			console.log(res);
			this.form.name = res.data.info.name;
			this.form.tel = res.data.info.tel;
			this.form.card = res.data.info.card;
			this.form.type = String(res.data.info.type);
			this.form.unit = res.data.info.unit;
			this.form.vocation = res.data.info.vocation;
		})

		console.log({
			uid: this.form.uid,
			name: this.form.name,
			tel: this.form.tel,
			card: this.form.card,
			type: this.form.type,
			unit: this.form.unit,
			vocation: this.form.vocation,
			NickName: this.form.NickName,
			HeadUrl: this.form.HeadUrl,
			sex: this.form.sex
		});

	},
	onReady() {
		this.$refs.form.setRules(this.rules)
	},
	methods: {
		submit() {
			this.$refs.form.validate().then(done => {
				if (done) {
					const telToken = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
						cardToken =
							/^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
						cardTokens =
							/^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/;
					if (!telToken.test(this.form.tel)) {
						this.$refs.uToast.show({
							message: '请输入正确手机号',
						})
						return
					}
					if (!cardToken.test(this.form.card) || cardTokens.test(this.form.card)) {
						this.$refs.uToast.show({
							message: '请输入正确的身份证号',
						})
						return
					}

					userExitInfo(this.form).then(res => {
						console.log(res);
						if (res.data.status === 1) {
							uni.navigateBack({
								delta: 1,
							})
						} else {
							this.$refs.uToast.show({
								message: res.data.err,
							})
						}

					})
				}
			})
		},
		targetAdd() {
			uni.navigateTo({
				url: '/pages/reserve/index'
			})
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #efefef;
	min-height: 100vh;
}

.u-form {
	background: white;
	width: 93%;
	margin: 2vh auto 0 auto;
	border-radius: 10px;
	padding: 1vh 0;
}

.u-form-item {
	padding: 1vh 0;
}

.u-form-item__body__left {
	padding-left: 3.5%;
}

.u-radio {
	margin-left: 3.5vw;
}

.submit {
	margin: 3.5vh auto;
	background: #19be6b;
	width: 25vw;
	color: white;
}

.reserve {
	background: white;
	display: grid;
	place-content: center;
	height: 15vh;
	margin: 2vh auto 0 auto;
	width: 93%;
	border-radius: 10px;

	>view {
		display: flex;
		align-items: center;

		>image {
			width: 6vw;
			height: 6vw;
			margin-right: 1vw;
		}

		>text {
			font-size: 15px;
		}
	}
}
</style>
